<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="flat-toast">
  <template>
    <style>
      :host {
        display: block;
        position: fixed;
        left: calc(50% - 160px);
        right: calc(50% - 160px);
        bottom: 0;
        background-color: var(--app-primary-color);
        opacity: 0.95;
        color: white;
        width: 320px;
        padding: 12px;
        visibility: hidden;
        text-align: center;
        will-change: transform;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        transition-property: visibility, -webkit-transform, opacity;
        transition-property: visibility, transform, opacity;
        transition-duration: 0.2s;
      }

      :host(.opened) {
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      @media (max-width: 767px) {
        :host {
          top: auto;
          bottom: 0;
          left: 0;
          right: 0;
          width: auto;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
          z-index: 1;
        }
      }

    </style>
    <slot></slot>
  </template>
  <script>
    /**
     * `flat-toast` Description
     *
     * @summary Toast of FlatElements
     * @customElement
     * @polymer
     * @extends Polymer.Element
     */
    class FlatToast extends Polymer.Element {
      static get is() {
        return 'flat-toast';
      }

      static get properties() {
        return {
          duration: {
            type: Number,
            value: 3000
          }
        }
      }

      open() {
        Polymer.dom.flush();
        this.offsetHeight && this.classList.add('opened');
        this._closeDebouncer = Polymer.Debouncer.debounce(this._closeDebouncer,
          Polymer.Async.timeOut.after(this.duration), this.close.bind(this));
      }

      close() {
        this.classList.remove('opened');
      }
    }
    customElements.define(FlatToast.is, FlatToast);

  </script>
</dom-module>
